<!-- 模板，div ，el ui元素布局-->
<template>
  <!-- 一个根DIV -->
  <div>
    <!-- 1.导航条 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="showCateDialog(null)"
            >添加分类</el-button
          >
        </el-col>
      </el-row>

      <!-- 树形表格
      https://www.npmjs.com/package/vue-table-with-tree-grid
       :data:绑定数据
       :columns：列配置
       :is-fold:是否展开
       --> 
      <tree-table
        stripe
        :is-fold="is_fold"
        class="treeTable"  
        :data="catelist"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
        :show-row-hover="false"
      >
      <!-- 自定义列 -->
        <!-- 排序 -->
        <template slot="cj" slot-scope="scope">
          <!-- {{scope.row}} -->
          <el-tag type="success" size="mini">{{ scope.row.cj }}级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt" slot-scope="scope">
          <el-button
            type="primary"
            @click="showCateDialog(scope.row.id)"
            icon="el-icon-edit"
            size="mini"
            >编辑</el-button
          >
          <el-button
            type="danger"
            @click="removeCate(scope.row.id)"
            icon="el-icon-delete"
            size="mini"
            >删除</el-button
          >
        </template>
      </tree-table>
    </el-card>

    <!-- 添加、编辑分类的对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="CateDialogVisible"
      width="50%"
      @close="CateDialogClosed"
    >
      <!-- 添加/编辑 分类的表单      -->
      <el-form
        :model="saveCateForm"
        :rules="saveCateFormRules"
        ref="saveCateFormRef"
        label-width="100px"
      >
        <el-form-item label="分类名称：" prop="cname">
          <el-input v-model="saveCateForm.cname"></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="orderNum">
          <el-input-number
            v-model="saveCateForm.orderNum"
            :min="1"
            :max="100"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="父级分类：">
          <!-- options 用来指定数据源 -->
          <!-- props 用来指定配置对象 -->
          <el-cascader
            expand-trigger="hover"
            :options="parentCateList"
            :props="cascaderProps"
            v-model="selectedKeys"
            @change="parentCateChanged"
            clearable
            change-on-select
          >
          </el-cascader>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button @click="CateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCate">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
export default {
  data() {
    return {
      /////////////////////// 树的 数据列表，默认为空
      is_fold:false, //默认展开
      catelist: [],

      // 为树指定列的定义
      columns: [
        {
          label: "分类名称",  //列名
          prop: "cname",     //绑定字段  跟entity一致
        },
        {
          label: "排序",
          prop: "orderNum",
        },
        //自定义列
        {
          label: "层次",
          // 表示，将当前列定义为模板列
          type: "template",
          // 表示当前这一列使用模板名称
          template: "cj",
        },
        {
          label: "操作",
          // 表示，将当前列定义为模板列
          type: "template",
          // 表示当前这一列使用模板名称
          template: "opt",
        },
      ],

      ///////////////////////////////编辑、添加 对话框

      // 控制添加分类对话框的显示与隐藏
      title:"",
      CateDialogVisible: false,
      // 添加、编辑 分类的表单数据对象
      saveCateForm: {
        id:"",
        // 将要添加的分类的名称
        cname: "",
        orderNum: 1,
        // 父级分类的Id
        pid: 0,
        // 分类的等级，默认要添加的是1级分类
        cj: 1,
        path: "",
      },
      // 添加、编辑分类表单的验证规则对象
      saveCateFormRules: {
        cname: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
      },

      /////////////////////////////级联选择器
      // 父级分类的列表
      parentCateList: [],
      // 指定级联选择器的配置对象
      cascaderProps: {
        value: "id",
        label: "cname",
        children: "children",
      },
      // 选中的父级分类的Id数组
      selectedKeys: [],
    };
  },
  created() {
    //获取数据
    this.getCateList();
  },
  methods: {

    ///////////////////////////////// 获取分类数据
    async getCateList() {
      const { data: res } = await this.$http.post("/category/list");
     
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error("获取分类失败！");
      }

    
      // 把数据列表，赋值给 catelist
      this.catelist = res.data;

      this.parentCateList = res.data;

      this.$gs.getTreeData(this.parentCateList)

       
    },
        // 选择项发生变化触发这个函数
    parentCateChanged() {
      console.log("---", this.selectedKeys);
      // 如果 selectedKeys 数组中的 length 大于0，证明选中的父级分类
      // 反之，就说明没有选中任何父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的Id
        this.saveCateForm.pid = this.selectedKeys[this.selectedKeys.length - 1];
        // 为当前分类的等级赋值
        this.saveCateForm.cj = this.selectedKeys.length + 1;
        console.log(this.saveCateForm);
      }
      else{
         console.log("+++++");
         this.saveCateForm.cj = 1;
         this.saveCateForm.pid = 0;
      }

    },


    //////////////////////////////////添加或编辑
    // 点击按钮，展示分类的对话框
   async showCateDialog(id) {
      console.log("--",id)
      if(id==null){
        this.title="添加"
      }
      else{
      this.title="更新"
      const { data: res } = await this.$http.get("/category/info/" + id);
      this.saveCateForm = res.data;
      
      //绑定当前的父目录
      if (this.saveCateForm.path != "")
        this.selectedKeys = eval(this.saveCateForm.path);
      }

      this.CateDialogVisible = true;
    },

    // 点击按钮，添加新的分类
    saveCate() {
      this.$refs.saveCateFormRef.validate(async (valid) => {
        if (!valid) return;
        this.saveCateForm.path = this.selectedKeys.toString();
        
        //判定更新或添加
        let url="/category/save"
        if(this.saveCateForm.id.length != 0)
           url="/category/update"

        const { data: res } = await this.$http.post(
          url,
          this.saveCateForm
        );

        if (res.code !== 200) {
          return this.$message.error("保存失败！原因："+res.msg);
        }

        this.$message.success("保存分类成功！");
        this.getCateList();
        this.CateDialogVisible = false;
      });
    },


    // 监听对话框的关闭事件，重置表单数据
    CateDialogClosed() {
      console.log("111", this.selectedKeys);
      this.$refs.saveCateFormRef.resetFields();
      this.selectedKeys = [];
      this.saveCateForm.cj = 1;
      this.saveCateForm.pid = 0;
      
    },

   
  //////////////////////////删除

    // 删除分类
    async removeCate(id) {
     // 弹框
      this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 删除逻辑
          const { data: res } = await this.$http.get("/category/delete/"+id);

          if (res.code !== 200) {
            return this.$message.error("删除失败！失败原因为："+res.msg);
          }

          this.$message.success("删除成功！");

          this.getCateList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }
     

    
  },
};
</script>

<style  scoped>
.treeTable,
.el-card,
.el-pagination {
  margin-top: 15px;
}

.el-cascader {
  width: 100%;
}
</style>
